<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body oncontextmenu="return false;" style="margin: 0; padding: 0; overflow: hidden;">
  <canvas id="canvas" style="background:black" width="620" height="340"></canvas>
  <audio style="display:none; height: 0" id="bg-music" preload="auto" src="music/黑客帝国.mp3"></audio>
</body>

</html>
<script type="text/javascript">
window.onload = function() {
  // 获取图形对象
  var canvas = document.getElementById("canvas");

  // 获取图形的上下文
  var context = canvas.getContext("2d");

  // 获取浏览器屏幕的宽度和高度
  var W = window.innerWidth;
  var H = window.innerHeight;

  // 设置canvas的宽度和高度
  canvas.width = W;
  canvas.height = H;

  // 每个文字的字体大小
  var _fontSize = 15;

  // 计算列
  var _colunms = Math.floor(W / _fontSize);

  // 记录每列文字的y轴坐标
  var drops = [];

  // 给每一个文字初始化一个起始点的位置
  for (var i = 0; i < _colunms; i++) {
    drops.push(0);
  }

  // 运动的文字
  const str = "!@#$%^&*()0123456789ABCDEFGHIJKLMNOPQURSTUVWXYZ";
  // str = str.split('').reverse().join('');
  // const str = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闵席季麻强贾路娄危江童颜郭梅盛林刁钟徐邱骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫经房裘缪干解应宗丁宣贲邓郁单杭洪包诸左石崔吉钮龚程嵇邢滑裴陆荣翁荀羊於惠甄曲家封芮羿储靳汲邴糜松井段富巫乌焦巴弓牧隗山谷车侯宓蓬全郗班仰秋仲伊宫宁仇栾暴甘钭厉戎祖武符刘景詹束龙叶幸司韶郜黎蓟薄印宿白怀蒲邰从鄂索咸籍赖卓蔺屠蒙池乔阴鬱胥能苍双闻莘党翟谭贡劳逄姬申扶堵冉宰郦雍郤璩桑桂濮牛寿通边扈燕冀郏浦尚农温别庄晏柴瞿阎充慕连茹习宦艾鱼容向古易慎戈廖庾终暨居衡步都耿满弘匡国文寇广禄阙东欧殳沃利蔚越夔隆师巩厍聂晁勾敖融冷訾辛阚那简饶空曾毋沙乜养鞠须丰巢关蒯相查后荆红游竺权逯盖益桓公万俟司马上官欧阳夏侯诸葛闻人东方赫连皇甫尉迟公羊澹台公冶宗政濮阳淳于单于太叔申屠公孙仲孙轩辕令狐钟离宇文长孙慕容鲜于闾丘司徒司空丌官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓跋夹谷宰父谷梁晋楚闫法汝鄢涂钦段干百里东郭南门呼延归海羊舌微生岳帅缑亢况郈有琴梁丘左丘东门西门商牟佘佴伯赏南宫墨哈谯笪年爱阳佟第五言福百家姓';
  // const str = '临兵斗者皆阵列前行';
  // const str = '嗡嘛呢呗咪吽';
  // const str = '嗡嘛智牟耶萨列德';
  // const str = "01"

  // 4:fillText(str,x,y);原理就是去更改y的坐标位置
  // 绘画的函数
  function draw() {

    // 让背景逐渐由透明到不透明
    context.fillStyle = "rgba(0,0,0,0.05)";
    context.fillRect(0, 0, W, H);

    // 给字体设置样式
    // context.font = "700 "+_fontSize+"px Microsoft YaHei";
    // context.font = _fontSize + 'px arial';
    // context.font = _fontSize + 'px Verdana';
    context.font = _fontSize + 'px Georgia';
    context.textAlign = 'center';

    // 给字体添加颜色
    context.fillStyle = "lightseagreen"; // 随意更改字体颜色

    // 写入图形中
    for (var i = 0; i < _colunms; i++) {
      var index = Math.floor(Math.random() * str.length);
      var x = i * _fontSize;
      var y = drops[i] * _fontSize;
      context.fillText(str[index], x, y);

      // 如果要改变时间，肯定就是改变每次他的起点
      if (y >= canvas.height && Math.random() > 0.92) {
        drops[i] = 0;
      }

      drops[i]++;
    }
  };

  function randColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
  }

  draw();
  setInterval(draw, 30);
};
</script>